<template>
	<view class="u-page">
		<view>
			<u-input placeholder="后置插槽">
				<template slot="suffix">
					<text>321</text>
				</template>
			</u-input>
			<u-input
				v-model="num1"
				type="number"
				clearable="">
			</u-input>
		</view>
		<view class="u-demo-block">
			<u--form
				labelPosition="left" 
				:labelWidth="80" 
				:model="formData" 
				:rules="formRules" 
				ref="form">
				
				<!-- 记录的内容 -->
				<view v-show="show.otherRecordItem">
					<!-- 选择日期+值别 -->
					<u-form-item
						label="日期轮班"
						prop="recordTime"
						ref="recordTime"
						required
						@click="recordTimeClick">
						<u-input
							v-model="formData.recordTime"
							disabled
							disabledColor="#ffffff"
							placeholder="请选择日期轮班"
							fontSize="13px"
							color="#12569F"
							suffixIcon="arrow-right">
						</u-input>
					</u-form-item>
					<!-- 计划产量 -->
					<u-form-item
						label="计划产量"
						required
						prop="planOutput"
						ref="planOutput">
						<u-input
							v-model="formData.planOutput"
							type="number"
							placeholder="请输入计划产量"
							clearable>
								

						</u-input>				
					</u-form-item>
					<!-- 输入备注 -->
					<u-form-item
						label="备注"
						prop="remark"
						ref="remark">
						<u--textarea
							v-model="formData.remark"
							placeholder="按需输入"
							autoHeight
							count
							:maxlength="144">
							
						</u--textarea>
					</u-form-item>
				</view>
			</u--form>
			<!-- 按钮 -->
			<u-button
				type="primary"
				:text="submitBtn.text"
				customStyle="margin-top: 20px"
				:loading="submitBtn.loading"
				:disabled="submitBtn.disabled"
				loadingMode="semicircle"
				@click="formSubmit">
			</u-button>
			
			<u-button
				type="warning"
				text="重置"
				plain
				customStyle="margin-top: 20px"
				@click="formReset">
			</u-button>
			<!-- 日期轮班picker -->
			<u-picker 
				:show="show.dateShiftPicker" 
				:columns="pickerDataArr"
				closeOnClickOverlay
				:defaultIndex="pickerDefaultVal"
				@cancel="show.dateShiftPicker=false"
				@close="show.dateShiftPicker=false"
				@confirm="dateShiftPickerConfirm">
			</u-picker>

		</view>
		
	</view>
</template>

<script>
	import {getUserCodeEcho} from '@/api/user/user.js';
	import {getMachineNoEcho} from '@/api/machine/machine.js'
	import xbctimer from '@/js_sdk/xbc-timer/timer-1.1.6.js'
	export default {
		data() {
			return {
				num1:0,
				// 表单数据
				formData:{
					userInfo:{
						userCode:''
					},
					machineInfo:{
						machineNo:''
					},
					recordTime:'',
					planOutput:null,
					actualOutput:null,
					defect:null,
					recordRemark:''
				},
				// 校验数据
				formRules:{
					'userInfo.userCode':[
						{
							type: 'string',
							required: true,
							message: '请填写姓名',
							trigger: ['blur', 'change'],
						},
						{
							asyncValidator:(rule,value,callback)=>{
								if(uni.$u.test.isEmpty(value)){
									callback(new Error('不能为空'))
									return
								}
								getUserCodeEcho({userCode:value}).then(res=>{
									this.echo.userCode=res.data.topDept.topDeptName + '\n'+ res.data.user.userFullName
									this.disabled.machineNo=false
									this.disabled.userCode=true
									
									uni.$u.sleep(300).then(()=>{
										this.focus.machineNo=true
										this.machineNoFocus()
									})
									callback()
								}).catch(err=>{
									callback(new Error(err.message|| err.msg || (err.errMsg+'; 服务器异常')))
								})
							},
							// trigger:['blur']
						}
					],
					'machineInfo.machineNo':[
						{
							type: 'string',
							required: true,
							message: '请填写设备号',
							trigger: ['blur', 'change']
						},
						{
							asyncValidator:(rule,value,callback)=>{
								if(uni.$u.test.isEmpty(value)){
									callback(new Error('不能为空'))
								}
								let params = {
									machineNo: value,
									userCode : this.formData.userInfo.userCode
								}
								getMachineNoEcho(params).then(res=>{
									uni.$u.sleep(50).then(()=>{
										this.echo.machineNo=res.data.topDept.topDeptName+'\n' + res.data.secDept.secDeptName + '\n' + res.data.machine.machineName
										this.disabled.machineNo=true
										this.show.otherRecordItem=true
									})
									callback()
								}).catch(err=>{
									callback(new Error(err.message|| err.msg || (err.errMsg+'; 服务器异常')))
								})
							},
						}
					
					],
					recordTime:[
						{
							type: 'string',
							required: true,
							message: '不能为空',
							trigger: ['blur', 'change'],
						},
					],
					planOutput:[
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								if(uni.$u.test.isEmpty(value)){
									return false
								}
								if(Number(value)<0){
									return false
								}
								return true;
							},
							message:'必填且≥0',
							trigger:['change','blur']
						}
					],
					actualOutput:[
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								if(uni.$u.test.isEmpty(value)){
									return false
								}
								if(Number(value)<0){
									return false
								}
								return true;
							},
							message:'必填且≥0',
							trigger:['change','blur']
						}
					],
					defect:[
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								if(uni.$u.test.isEmpty(value)){
									return false
								}
								if(Number(value)<0){
									return false
								}
								return true;
							},
							message:'必填且≥0',
							trigger:['change','blur']
						}
					]
				},
				// show
				show:{
					otherRecordItem:true,
					dateShiftPicker:false,
				},
				// 焦点
				focus:{
					userCode:false,
					machineNo:false,
				},
				// 禁用
				disabled:{
					userCode:false,
					machineNo:true,
				},
				// input回显
				echo:{
					userCode:'',
					machineNo:''
				},
				// 计时器
				timer:{
					userCode:0,
					machineNo:0
				},
				// 选时间用的 picker
				pickerDataArr:[
					['数据1','数据2'],
					['1值','2值']
				],
				pickerDefaultVal:[0,0],
				// 提交按钮的属性
				submitBtn:{
					text:'提交',
					loading:false,
					disabled:false
				},
			};
		},
		onNavigationBarButtonTap(e) {
			if (e.type === 'menu') {
				this.showMenuDrawer();
			} else if (e.type === 'home') {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			}
		},
		onShow() {
			this.$nextTick(()=>{
				this.focus.userCode=true
			})
		},
		onUnload(){
			clearTimeout(this.timer.userCode)
			clearTimeout(this.timer.machineNo)
		},
		methods:{
			initData(){
				this.recordTime=''
				
				this.show.otherRecordItem=false
				this.show.dateShiftPicker=false
				
			},
			userCodeFocus(){
				if(this.echo.userCode!=''){
					this.echo.userCode=''
				}
				this.$nextTick(()=>{
					// #ifdef APP-PLUS
					uni.hideKeyboard()
					// #endif
				})
				uni.$u.sleep(100).then(()=>{
					
				})
			},
			machineNoFocus(){
				uni.$u.sleep(300).then(()=>{
					// #ifdef APP-PLUS
					uni.hideKeyboard()
					// #endif
					if(this.echo.machineNo!=''){
						this.echo.machineNo=''
					}
				})
			},
			userCodeBlur(){
				this.timer.userCode= setTimeout(()=>{
					this.$refs.form.validateField('userInfo.userCode');
				},666)
			},
			machineNoBlur(){
				this.timer.machineNo= setTimeout(()=>{
					this.$refs.form.validateField('machineInfo.machineNo');
				},666)				
			},
			recordTimeClick(){
				this.$refs.form.validateField('userInfo.userCode')
				this.$refs.form.validateField('machineInfo.machineNo')
				// 计算出前7天的日期,使用 js_sdk/xbc-timer
				this.show.dateShiftPicker=true
				this.pickerDataArr[0].splice(0,this.pickerDataArr[0].length)
				xbctimer.getLatestDates(7,true).forEach(item=>{
						this.pickerDataArr[0].push(item)
				})
				// 默认2值
				if(new Date().getHours()>=20 || new Date().getHours()<8 ){
					this.pickerDefaultVal.splice(0,1,this.pickerDataArr[0].length-2)
					this.pickerDefaultVal.splice(1,1,1)
				} 
				else{
					this.pickerDefaultVal.splice(0,1,this.pickerDataArr[0].length-1)
					this.pickerDefaultVal.splice(1,1,0)
				}

			},
			dateShiftPickerConfirm(e){
				this.formData.recordTime=e.value.join(" ")
				this.show.dateShiftPicker=false
			},
			formSubmit(){
				const _this= this;
				//数据验证
				this.$refs.form.validate()
					.then(res=>{
						console.log(res);
					})
					.catch(err=>{
						uni.showToast({
							title:'提交数据错误',
							icon:'error',
							duration:2000
						})
					})
			},
			formReset(){
				
			},
			
		}
	}
</script>

<style lang="scss">
.echo {
	margin-left: 80px;
}
</style>
